<template>
    <h4>sum:{{sum}}</h4>
    <button @click="sum++">+1</button>
    <hr />
    <h2>姓名:{{person.name}}</h2>
    <h2>年龄:{{person.age}}</h2>
    <h2>薪资:{{person.job.j1.salary}}</h2>
    <button @click="person.name += '~'">修改名字</button>
    <button @click="person.age++">增加年龄</button>
    <button @click="person.job.j1.salary++">涨薪</button>
</template>

<script>
import { readonly, ref ,reactive, shallowReadonly } from 'vue'
export default {
    name: 'Demo',
    components: {},
    setup(){
        let sum = ref(0)
        sum = readonly(sum)
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 1
                }
            }
        })
        person = shallowReadonly(person)
        return{
            sum,person
        }
    }
}
</script>

<style>

</style>